"use client"

import Image from "next/image"
import { Card, CardContent, CardTitle } from "@/components/ui/card"
import { useLanguage } from "@/context/language-context"

export function TeamSection() {
  const { dictionary } = useLanguage()

  const teamMembers = [
    {
      name: dictionary.teamMember1Name,
      role: dictionary.teamMember1Role,
      image: "/placeholder.svg?height=200&width=200",
    },
    {
      name: dictionary.teamMember2Name,
      role: dictionary.teamMember2Role,
      image: "/placeholder.svg?height=200&width=200",
    },
    {
      name: dictionary.teamMember3Name,
      role: dictionary.teamMember3Role,
      image: "/placeholder.svg?height=200&width=200",
    },
  ]

  return (
    <section className="py-12 md:py-20 bg-white dark:bg-gray-800">
      <div className="container mx-auto px-4 md:px-6 text-center">
        <h2 className="text-3xl md:text-4xl font-bold mb-10 text-gray-900 dark:text-gray-50">{dictionary.teamTitle}</h2>
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
          {teamMembers.map((member, index) => (
            <Card key={index} className="flex flex-col items-center p-6 shadow-md">
              <div className="relative w-32 h-32 rounded-full overflow-hidden mb-4">
                <Image
                  src={member.image || "/placeholder.svg"}
                  alt={member.name}
                  layout="fill"
                  objectFit="cover"
                  className="rounded-full"
                />
              </div>
              <CardTitle className="text-xl font-semibold mb-1 text-gray-900 dark:text-gray-50">
                {member.name}
              </CardTitle>
              <CardContent className="p-0 text-gray-600 dark:text-gray-400">{member.role}</CardContent>
            </Card>
          ))}
        </div>
      </div>
    </section>
  )
}
